<template>
	<view class="page-container back-grey">
		<!-- tabs标签区域 -->
		<view :style="{position: 'sticky', top: 0, left: 0, zIndex: 99}">
			<u-tabs :list="tabList" :is-scroll="false" :current="type" @change="change"
				font-size="30" :bold="false" :bar-height="8" :bar-width="40" inactive-color="#999999" :active-color="primaryColor">
			</u-tabs>
		</view>
		<!-- 我的订单列表 -->
		<view v-show="type==0" class="pall-l">
			<!-- 订单项 -->
			<view v-for="(item, index) in list0" :key="index" class="mb-l prow-l pcol-s back-white radius-l" @click.stop="goOrderDetail(item.merOrderNo)">
				<cd-petcard-order :pet="orderPet(item)" :showAvatar="false" :statusText="orderStatus(item.status)"></cd-petcard-order>
				<!-- 平台担保期 -->
				<view class="row-box sb mt-10">
					<text class="s24">平台担保期：{{ deliveryTimeFormat(item.ct, 'yyyy-MM-dd') }}至{{ getSpecialTime(deliveryTimeFormat(item.ct, 'yyyy-MM-dd'), 6) }}</text>
					<text class="s20 grey-light">￥0.00</text>
				</view>
				<!-- 底部按钮区域 -->
				<view class="button-grid">
					<!-- 待付款 -->
					<view v-if="item.status==0" class="button primary" @click.stop="payWxapplet(item.merOrderNo, 'list')">立即付款</view>
					<view v-if="item.status==0" class="button" @click.stop="manageOrder(item.merOrderNo, 1, 'list')">取消订单</view>
					
					<!-- 已付款待发货 -->
					<view v-if="item.status==1" class="button primary" @click.stop="refundAll(item.merOrderNo)">申请退款</view>
					
					<!-- 已发货待收货 -->
					<view v-if="item.status==2" class="button primary" @click.stop="manageOrder(item.merOrderNo, 2, 'list')">确认收货</view>
					
					<!-- 商家同意换货 -->
					<view v-if="item.status==9" class="button primary" @click.stop="goAftersaleExpress(item.merOrderNo, orderPet(item), item.afterSaleId)">上传物流</view>
					
					<!-- 已付款待发货 已发货待收货 换货申请中 商家同意换货 商家拒绝换货 用户已发货（换货中） -->
					<view v-if="item.status==1 || item.status==2 || item.status==7 || item.status==9 || item.status==10 || item.status==12" class="button" @click.stop="goChat(item.userId, item.userName)">联系商家</view>
					
					<!-- 已发货待收货 -->
					<view v-if="item.status==2" class="button" @click.stop="goAftersaleApply(item.merOrderNo, orderPet(item))">申请换货</view>
					
					<!-- 待评价 -->
					<view v-if="item.status==3" class="button primary" @click.stop="goReview(item.merOrderNo, orderPet(item), item.merchantId)">去评价</view>
					
					<!-- 已评价 -->
					<view v-if="item.status==4" class="button primary" @click.stop="goReview(item.merOrderNo, orderPet(item), item.merchantId)">查看评价</view>
					
					<!-- 已评价 已取消 退款完成 售后完成 -->
					<view v-if="item.status==4 || item.status==6 || item.status==8 || item.status==11" class="button" @click.stop="manageOrder(item.merOrderNo, 3, 'list')">删除订单</view>
					
					<!-- 换货申请中 商家拒绝换货 用户已发货（换货中） -->
					<view v-if="item.status==7 || item.status==10 || item.status==12" class="button" @click.stop="openWxKf()">联系客服</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus0" />
		</view>
		
		<view v-show="type==1" class="pall-l">
			<!-- 订单项 -->
			<view v-for="(item, index) in list1" :key="index" class="mb-l prow-l pcol-s back-white radius-l" @click.stop="goOrderDetail(item.merOrderNo)">
				<cd-petcard-order :pet="orderPet(item)" :showAvatar="false" :statusText="orderStatus(item.status)"></cd-petcard-order>
				<!-- 平台担保期 -->
				<view class="row-box sb mt-10">
					<text class="s24">平台担保期：{{ deliveryTimeFormat(item.ct, 'yyyy-MM-dd') }}至{{ getSpecialTime(deliveryTimeFormat(item.ct, 'yyyy-MM-dd'), 6) }}</text>
					<text class="s20 grey-light">￥0.00</text>
				</view>
				<!-- 底部按钮区域 -->
				<view class="button-grid">
					<!-- 待付款 -->
					<view class="button primary" @click.stop="payWxapplet(item.merOrderNo, 'list')">立即付款</view>
					<view class="button" @click.stop="manageOrder(item.merOrderNo, 1, 'list')">取消订单</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus1" />
		</view>
		
		<view v-show="type==2" class="pall-l">
			<!-- 订单项 -->
			<view v-for="(item, index) in list2" :key="index" class="mb-l prow-l pcol-s back-white radius-l" @click.stop="goOrderDetail(item.merOrderNo)">
				<cd-petcard-order :pet="orderPet(item)" :showAvatar="false" :statusText="orderStatus(item.status)"></cd-petcard-order>
				<!-- 平台担保期 -->
				<view class="row-box sb mt-10">
					<text class="s24">平台担保期：{{ deliveryTimeFormat(item.ct, 'yyyy-MM-dd') }}至{{ getSpecialTime(deliveryTimeFormat(item.ct, 'yyyy-MM-dd'), 6) }}</text>
					<text class="s20 grey-light">￥0.00</text>
				</view>
				<!-- 底部按钮区域 -->
				<view class="button-grid">
					<!-- 已付款待发货 -->
					<view class="button primary" @click.stop="refundAll(item.merOrderNo)">申请退款</view>
					<view class="button" @click.stop="goChat(item.userId, item.userName)">联系商家</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus2" />
		</view>
		
		<view v-show="type==3" class="pall-l">
			<!-- 订单项 -->
			<view v-for="(item, index) in list3" :key="index" class="mb-l prow-l pcol-s back-white radius-l" @click.stop="goOrderDetail(item.merOrderNo)">
				<cd-petcard-order :pet="orderPet(item)" :showAvatar="false" :statusText="orderStatus(item.status)"></cd-petcard-order>
				<!-- 平台担保期 -->
				<view class="row-box sb mt-10">
					<text class="s24">平台担保期：{{ deliveryTimeFormat(item.ct, 'yyyy-MM-dd') }}至{{ getSpecialTime(deliveryTimeFormat(item.ct, 'yyyy-MM-dd'), 6) }}</text>
					<text class="s20 grey-light">￥0.00</text>
				</view>
				<!-- 底部按钮区域 -->
				<view class="button-grid">
					<!-- 已发货待收货 -->
					<view class="button primary" @click.stop="manageOrder(item.merOrderNo, 2, 'list')">确认收货</view>
					<view class="button" @click.stop="goChat(item.userId, item.userName)">联系商家</view>
					<view class="button" @click.stop="goAftersaleApply(item.merOrderNo, orderPet(item))">申请换货</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus3" />
		</view>
		
		
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import mixinOrder from "@/common/mixin_order.js"
	export default {
		mixins: [mixinOrder], // 混入订单通用
		data() {
			return {
				tabList: [ {name: '全部'}, {name: '待送达'}, {name: '待评价'}, {name: '退款'}], // tab列表
				type: 0, // 当前选中的订单类型-当前tab
				
				// 列表数据相关
				pageSize: 10, // 每页数据量
				pageIndex0: 1, // 第几页
				pageCount0: 0, // 总数
				list0: [], // 列表
				scrollTop0: 0, // 页面滚动距离
				loadStatus0: 'loadmore',  // 加载状态
				
				pageIndex1: 1, // 第几页
				pageCount1: 0, // 总数
				list1: [], // 列表
				scrollTop1: 0, // 页面滚动距离
				loadStatus1: 'loadmore',  // 加载状态
				
				pageIndex2: 1, // 第几页
				pageCount2: 0, // 总数
				list2: [], // 列表
				scrollTop2: 0, // 页面滚动距离
				loadStatus2: 'loadmore',  // 加载状态
				
				pageIndex3: 1, // 第几页
				pageCount3: 0, // 总数
				list3: [], // 列表
				scrollTop3: 0, // 页面滚动距离
				loadStatus3: 'loadmore',  // 加载状态
				
			};
		},
		computed: {
			...mapState('m_user', ['openid']),
		},
		onLoad(options) {
			if (options.type) this.type = options.type
		},
		onShow() {
			this.getList(0)
		},
		onPageScroll(e) { // 页面滚动监听
			// console.log(e)
			this[`pageScroll${this.type}`] = e.scrollTop
		},
		onPullDownRefresh() {
			this.getList(0)
		},
		onReachBottom() {
			this.getList(1)
		},
		methods: {
			// ---------- 用户操作
			// 切换tab
			change(index) {
				this.type = index
				if (!this[`list${this.type}`].length) { // 未加载过数据
					return this.getList(0)
				}
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this[`pageScroll${this.type}`]
					})
				},0)
			},
			// 点击跳转到订单详情
			goOrderDetail(id) {
				uni.navigateTo({
					url: `/pages/subPackage/user/my_order_detail/my_order_detail?id=${id}`
				})
			},
			// ----------
			
			// ---------- 获取数据
			// 获取订单列表
			getList(condition) {
				// 判断情况， 0新获取 1分页
				if (condition==0) {
					this[`pageIndex${this.type}`] = 1
				} else if (this[`pageIndex${this.type}`] >= this[`pageCount${this.type}`]) {
					return this[`loadStatus${this.type}`] = 'nomore'
				} else {
					this[`pageIndex${this.type}`] += 1
				}
				this[`loadStatus${this.type}`] = 'loading'
				// 请求
				this.$api.GetOrderList({
					current: this[`pageIndex${this.type}`],
					limit: this.pageSize,
					queryType: 0, // 0=我的订单，1=店铺订单
					status: this.type-1
				}).then(res => {
					console.log('GetOrderList-success', res)
					if (res.data.code == 200) {
						if (this[`pageIndex${this.type}`] == 1) {
							this[`list${this.type}`] = res.data.data.records
							this[`pageCount${this.type}`] = res.data.data.pages
						} else {
							this[`list${this.type}`] = [...this[`list${this.type}`], ...res.data.data.records]
						}
						if (this[`pageIndex${this.type}`] < this[`pageCount${this.type}`]) {
							this[`loadStatus${this.type}`] = 'loadmore'
						} else {
							this[`loadStatus${this.type}`] = 'nomore'
						}
					} else if (res.data.code == 404) {
						this.gotoLogin()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetOrderList-fail', err)
					
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			// ----------
			
			// ---------- 处理数据
			// 右上订单状态文字
			orderStatus(status) {
				switch (status){
					case 0:
						return '待付款'
						break;
					case 1:
						return '待发货'
						break;
					case 2:
						return '待收货'
						break;
					case 3:
						return '待评价'
						break;
					case 4:
						return '已评价'
						break;
					case 6:
						return '已关闭'
						break;
					case 7:
						return '换货申请中'
						break;
					case 8:
						return '售后完成'
						break;
					case 9:
						return '商家同意换货'
						break;
					case 10:
						return '商家拒绝换货'
						break;
					case 11:
						return '退款已完成'
						break;
					case 12:
						return '换货中'
						break;
					default:
						break;
				}
			},
			// 订单宠物
			orderPet(order) {
				return {
					merchantId: order.merchantId,
					merchantName: order.userName,
					merchantIcon: order.userIcon,
					petIcon: order.petInfo.icon,
					title: order.petInfo.title,
					sex: order.petInfo.sex,
					birthday: order.petInfo.birthday,
					vaccineCount: order.petInfo.vaccineCount,
					killWormCount: order.petInfo.killWormCount,
					isSterilization: order.petInfo.isSterilization,
					price: order.price,
					currentPrice: order.currentPrice,
					payPrice: order.payPrice
				}
			},
			// ----------
		},
	}
</script>

<style lang="scss">
	// 底部操作按钮区域
	.button-grid {
		padding: 14rpx 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, 164rpx);
		direction: rtl;
		column-gap: 24rpx;
		.button {
			width: 100%;
			height: 60rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			text-align: center;
			font-size: 24rpx;
			border: 1rpx solid #bababa;
			color: #333333;
			&.primary {
				border: 1rpx solid $uni-color-primary;
				color: $uni-color-primary;
			}
		}
	}
</style>
